<div class="card-block bg-white">

  <ul class="nav nav-tabs">
    <li class="nav-item active"><a class="nav-link">编程题</a></li><!--href="/problems/type/6"-->
  </ul>
  <div class="block">
    <div class="form-group" style="margin-top: 1.25rem">
      <div class="col-md-3">
        <span class="from-label ">题目难度</span>
        <select [(ngModel)]="data.properties.degree" class="from-input ">
          <option value="">全部</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>

      <div class="col-md-5">
        <span class="from-label">关键词</span>
        <input class="from-input" [(ngModel)]="data.properties.name_like" type="text">
        <button class="btn btn-secondary" style=" margin-left: -4px;margin-top: -4px;" name="search" (click)="search($event)">搜索</button>
      </div>
    </div>
    <div style="clear: both"></div>
    <div style="margin-top: 1.25rem">
      <a routerLink="/problems/type/6/new">
        <button class="btn btn-primary">新建题目</button>
      </a>
      <button class="btn btn-secondary" [ngClass]="{'disabled':focusCount==0}" (click)="addProblemSetPanelShow()">
        批量加入题目集
      </button>
    </div>

    <div class="box" style="margin-top: 1.25rem">
      <div class="box-body no-padding">
        <table class="table table-striped">
          <tr>
            <th><input type="checkbox" [(ngModel)]="all" (change)="focusAll($event)"></th>
            <th>标题</th>
            <th>作者</th>
            <th>创建者</th>
            <th>难度</th>
            <th>分数</th>
            <!--<th>状态</th>-->
            <th>更新时间</th>
            <th>操作</th>
          </tr>

          <tr *ngFor="let d of reData; let i = index;">
            <td><input type="checkbox" [name]="d.code" [alt]="i" [(checked)]="selections[i].flag"
                       (change)="focus($event)"></td>
            <td><a style="cursor: pointer" [name]="d.code" (click)="detail($event)">{{d.name}}</a></td>
            <td>{{d.author}}</td>
            <td>{{d.creator}}</td>
            <td>{{d.degree}}</td>
            <td>{{d.score}}</td>
            <!--<td>状态</th>-->
            <td>{{d.updateTime}}</td>
            <td><a *ngIf="currentUser.code==d.creator" routerLink="/problems/type/6/new/{{d.code}}">修改</a></td>
          </tr>
        </table>
      </div>
    </div>
    <div>
      <p-paginator [rows]="10" [totalRecords]="total" (onPageChange)="paginate($event)"></p-paginator>
    </div>
  </div>
  <p-dialog [(visible)]="addProblemSetFlag" [minWidth]="300" [modal]="true" [responsive]="true">
    <p-header>
      请选择题目集
    </p-header>
      <select class="from-input" [(ngModel)]="problemSetCode" style="width: 100%">
      <option *ngFor="let d of problemSets; let i = index;" [value]="d.code">{{d.name}}</option>
    </select>
    <p-footer>
      <button class="btn btn-success" (click)="addProblemSet()">确认</button>
    </p-footer>
  </p-dialog>

  <p-dialog [(visible)]="detailFlag" [modal]="true" [responsive]="true" [width]="650" [minWidth]="400" [minY]="70">
    <p-header>
      题目预览
    </p-header>
    <div class="box" style="margin-top: 1.25rem">
      <div class="box-body no-padding">
        <table class="table table-striped">
          <tr>
            <th>标题</th>
            <th>作者</th>
            <th>单位</th>
            <th>难度</th>
            <th>分数</th>
            <th>创建者</th>
            <th>更新时间</th>
          </tr>
          <tr>
            <td>{{detailData.name}}</td>
            <td>{{detailData.author}}</td>
            <td>{{detailData.company}}</td>
            <td>{{detailData.degree}}</td>
            <td>{{detailData.score}}</td>
            <td>{{detailData.creator}}</td>
            <td>{{detailData.updateTime}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div [innerHTML]="detailData.describeHtml"></div>
    <p-footer>
      <button class="btn btn-success" (click)="hideDetail()">确认</button>
    </p-footer>
  </p-dialog>
</div>
<!--<div class="overlay" [ngStyle]="{'display':addProblemSetFlag?'block':'none'}">
</div>-->
